<template>
	<Box title="公司排名">
		<template #title>
			<ul class="order">
				<li class="item" v-for="(item, index) in time" :class="{sel: index == sel}" @click="sel = index">{{ item }}</li>
			</ul>
		</template>
		<el-table :data="m1.l2" style="width: 100%;" height="240">
			<el-table-column prop="name" label="公司名称" width="130" />
			<el-table-column prop="money" label="交易金额" />
			<el-table-column prop="red" label="分红金额" />
			<el-table-column prop="number" label="门店数量" width="80" />
		</el-table>
	</Box>
</template>

<script setup>
	import { m1Store } from '@st/m1';
	import { onMounted, reactive, ref } from 'vue';

	const m1 = m1Store();
	const time = reactive(['年', '月', '日']);
	let sel = ref(0);
	
	onMounted(() => {
		m1.getL2();
	})
</script>

<style lang="less">
@import "@less";
.order {
	.df();
	gap: 10px;
	.item {
		.padd(0, 10px);
		.bg(rgba(24, 144, 255, .5));
		.c(white);
		.bor_r(2px);
	};
	.sel {
		.bg(@c_vuyc);
	}
}
.el-table {
	--el-table-header-text-color: white;
	--el-table-text-color: #BFBFBF;
	--el-table-header-bg-color: black;
	--el-table-tr-bg-color: black;
	--el-table-row-hover-bg-color: none;
}
</style>